<template>
	<view>
		<view class="header-box">省(市)自由行</view>
		<view class="swiper-box">
			<view class="box-inline">
				<base-swiper height="100%" :list="list" radius="0px"></base-swiper>
			</view>
		</view>
		
		<view class="btn-box">
			<view class="btn-item" :style="{ '--bgk': 'linear-gradient(to bottom, #FDF450, #F7BF44)','--after-bgk':'#E78B31' }" @click="toLink('/pages/my/shop/shop')">查看消费商家</view>
			<view class="btn-item" :style="{ '--bgk': 'linear-gradient(to bottom, #F5C7A2, #EB7049)','--after-bgk':'#C1532Fs' }" @click="toLink('/pages/my/my')">积分二维码</view>
		</view>
		
		<view class="zixun-box">
			<view>咨询热线 - 微信同号</view>
			<view class="tel-box">
				<view>8438820</view>
				<view>18258521300</view>
				<view>18058689908</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				list: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			}
		},
		async onLoad() {
		

		},
		methods: {
			toLink(url){
				uni.navigateTo({
					url:url
				})
			},
		}
	}
</script>

<style lang="less">
	page{
		background-color: #f1f3f5;
	}
	.header-box{
		margin: 40rpx;
		text-align: center;
		font-size: 38rpx;
	}
	.swiper-box{
		margin: 40rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.box-inline{
			height: 400rpx;
		}
	}
	.btn-box{
		display: flex;
		flex-direction: column;
		gap: 40rpx;
		margin: 40rpx;
		margin-bottom: 20rpx;
		.btn-item{
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			color: #fff;
			background: var(--bgk);
			border-radius: 100rpx;
			position: relative;
			transform-style: preserve-3d;
			&::after{
				content: ' ';
				position: absolute;
				bottom: -6rpx;
				display: block;
				width: 100%;
				height: 100%;
				background: var(--after-bgk);
				// z-index: -1;  // h5不显示
				transform: translateZ(-1px);  
				border-radius: 100rpx;
			}
		}
	}
	.zixun-box{
		font-size: 24rpx;
		text-align: center;
		.tel-box{
			display: flex;
			justify-content: center;
			gap: 20rpx;
			margin-top: 6rpx;
			font-size: 28rpx;
			text-decoration-line: underline;
		}
	}
	
	
</style>
